<template>
    <div>
      <nav-header></nav-header>
      <nav-bread>
        <span>商品</span>
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <!-- 升序/降序 -->
          <div class="filter-nav">
            <span class="sortby">价格排序 by:</span>
            <span class="def">默认</span>
            <a @click="sortGoods()">
             排序
              <svg class="icon icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}">
                <use xlink:href="#icon-arrow-short"></use>
              </svg>
            </a>
            <a href="javascript:void(0)" class="filterby stopPop" @click.stop="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- 价格过滤 -->
            <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" @click="setPriceFilter('all')" v-bind:class="{'cur':priceChecked=='all'}">All</a></dd>
                <dd v-for="(item,index) in priceFilter">
                  <a href="javascript:void(0)"
                     @click="setPriceFilter(index)" 
                     v-bind:class="{'cur':priceChecked==index}">
                     {{item.startPrice}} - {{item.endPrice}}
                  </a>
                </dd>
              </dl>
            </div>

            <!-- 商品列表 -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="item in goodsList">
                    <div class="pic">
                      <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice | currency('$')}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 滚动加载插件 loadMore加载方法 busy:false启用-->
                <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                   <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
                </div>
                <!--  -->
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- 加入购物失败弹框 -->
      <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
          <p slot="message">
             请先登录,否则无法加入到购物车中!
          </p>
          <div slot="btnGroup">
              <a class="btn btn--m" href="javascript:;" @click="closeModal">关闭</a>
          </div>
      </modal>
      <!-- 加入购物成功弹框  -->
      <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
        <p slot="message">
          <svg class="icon-status-ok">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功!</span>
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
          <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
        </div>
      </modal>

      <div class="md-overlay" v-show="overLayFlag" @click.stop="closePop"></div>
      <nav-footer></nav-footer>
    </div>
</template>
<style type="text/css">
  .sort-up{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transition: all .3s ease-out
  }
</style>
<script>
    import NavHeader from './../components/NavHeader'
    import NavFooter from './../components/NavFooter'
    import NavBread from './../components/NavBread'
    import Modal from './../components/Modal'
    import axios from 'axios'
    export default{
        data(){
            return {
                goodsList:[],
                sortFlag:true,
                page:1,
                pageSize:8,
                busy:true,
                loading:false,
                priceFilter:[
                  {
                      startPrice:'0.00',
                      endPrice:'300.00'
                  },
                  {
                    startPrice:'300.00',
                    endPrice:'600.00'
                  },
                  {
                    startPrice:'600.00',
                    endPrice:'1500.00'
                  },
                  {
                    startPrice:'1500.00',
                    endPrice:'5000.00'
                  }
                ],
                priceChecked:'all',
                filterBy:false,
                overLayFlag:false,
                mdShow:false,
                mdShowCart:false
            }
        },
        mounted(){
            this.getGoodsList();
        },
        components:{
          NavHeader,
          NavFooter,
          NavBread,
          Modal
        },
        methods:{
          getGoodsList(flag){//获取商品数据
            var param = {
              page:this.page,
              pageSize:this.pageSize,
              sort:this.sortFlag ?1:-1,
              priceLevel:this.priceChecked
            }
            this.loading = true;
            setTimeout(()=>{
              axios.get("/goods/list",{params:param}).then((response)=>{
                let res = response.data;
                this.loading =false;
                if(res.status == "0"){
                  if(flag){
                    //多次加载数据时
                     this.goodsList =this.goodsList.concat(res.result);
                     if(res.result.length ==0){
                        this.busy = true;
                     }else{
                        this.busy = false;
                     }
                  }else{
                    // 第一次加载数据
                    this.goodsList = res.result;
                    // 当第一次加载数据完之后，把这个滚动到底部的函数触发打开
                    this.busy = false;
                  }
                }else{
                  this.goodsList = [];
                }
              });
            },500)
          },
          sortGoods(){//排序
            this.sortFlag = !this.sortFlag;
            this.page = 1;
            this.getGoodsList();
          },
          loadMore(){//加载更多
            this.busy = true;
            // 多次加载数据
            setTimeout(()=>{
              this.page ++;
              this.getGoodsList(true)
            },500)
          },
          setPriceFilter(index){//价格过滤
            this.priceChecked = index;
            this.page = 1
            this.getGoodsList()
          },
          addCart(productId){//添加购物车
            axios.post('/goods/addCart',{productId:productId}).then((res)=>{
                if(res.data.status =="0"){
                  this.mdShowCart = true;
                  this.$store.commit("addCartCount")
                }else{
                  this.mdShow = true
                }
            })
          },
          closeModal(){
            this.mdShow = false;
            this.mdShowCart = false
          }
        }
    }
</script>
